<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./web.css">
    <title>web1作业</title>
</head>

<body>
    <div class="group">
        <!-- 输入框 -->
        <input class="todovalue" type="text" name="todoValueName" id="todoValueID" placeholder="请输入你的任务内容，按回车键确认"
            onkeydown="valueChange(event)">
        <!-- 遍历数据 -->
        <div id="todoList">
            <!-- <div id="item0" class="item" name="items">
                <input type="checkbox" class="item-chk" name="checked" onclick="" id="cbox">
                <label for="cbox" class="item-sp">吃饭</label>
                <input id="item-del-0" type="button" class="item-del" value="删除" onclick="handleDelClick(0)">
            </div> -->
        </div>
        <!-- 操作的footer -->
        <div class="footer">
            <div><input type="checkbox" id="allclick" onclick="allclick()">全选&nbsp;&nbsp;&nbsp;&nbsp;<span
                    id="tongji">已完成0/全部0</span></div>
            <button type="button" onclick="delAll()">清除已完成任务</button>
        </div>
    </div>
</body>
<script lang="javascript">
    var index = 0;
    function init() {

    }
    function handleClick() {
        var temp = document.getElementsByName("todoValueName")[0].value;
        document.getElementById("todoList").innerHTML += "<div id=\"item" + index + "\" class=\"item\" name=\"items\"><input type=\"checkbox\" class=\"item-chk\" name=\"checked\" onclick=\"updateTongji()\" id=\"cbox"+index+"\"><label for=\"cbox"+index+"\" class=\"item-sp\">" + temp + "</label><input id=\"item-del-" + index + "\" type=\"button\" class=\"item-del\" value=\"删除\" onclick=\"handleDelClick(" + index + ")\"></div>";
        index++;
    }
    function valueChange(e) {
        console.log(e);
        if (event.keyCode == 13) {
            var temp = document.getElementsByName("todoValueName")[0].value;
            if(temp==""){
                alert("不能添加空任务！");
                return "exit";
            }
            handleClick();
            document.getElementById("todoValueID").value = "";
            updateTongji();
        };
    }
    function updateTongji() {
        var tj = document.getElementById("tongji");
        var res = 0;
        var cnt = document.getElementsByName("checked");
        for (var i = 0; i < cnt.length; i++) {
            if (cnt[i].checked == true)
                res++;
        }
        tj.textContent = "已完成" + res + "/全部" + index;
    }
    function handleDelClick(i) {
        var arr = document.getElementById("todoList");
        document.getElementById("item" + i).remove();
        index--;
        updateTongji();
    }
    function allclick() {//全选
        var check = document.getElementById("allclick");
        var cnt = document.getElementsByName("checked");
        if (check.checked == true) {
            for (var i = 0; i < cnt.length; i++) {
                cnt[i].checked = true;
            }
        } else {
            for (var i = 0; i < cnt.length; i++) {
                cnt[i].checked = false;
            }
        }
        updateTongji();
    }
    function delAll() {//清空已选择的
        var cnts = document.getElementsByName("items");
        var checks = document.getElementsByName("checked");
        var num = 0;
        console.log(cnts);
        for (var i = cnts.length - 1; i >= 0; i--) {
            if (checks[i].checked) {
                cnts[i].remove();
                num++;
            }
        }
        index -= num;
        updateTongji();
    }
    init();
</script>

</html>